import {Button, Card, Col, Form, Row, Toast} from "@douyinfe/semi-ui";
import {IconCloud, IconDelete, IconPlus, IconRefresh, IconSearch} from "@douyinfe/semi-icons";
import {useEffect, useImperativeHandle, useRef, useState} from "react";
import Home2 from "./compents/StudentTable.jsx";
import {getCrm, getstuinfo, getuserinfo} from "../../../api/api.js";
import StudentTable from "./compents/StudentTable.jsx";
import Stuimp from "./compents/Stuimp.jsx";
import Student_addmodal from "./compents/student_addmodal.jsx";

function Stutable_form() {
    const api = useRef();
    const childRef = useRef(null);
    const [treeData,settreeData] = useState()
    useEffect(()=>{
        async function getterCrm() {
            const res = await getCrm()
            console.log(res)
            settreeData(res.data.data)
        }
        getterCrm()
    },[])

    /**
     *
     * @param data
     * 表单验证
     */
    function validat(data){
        api.current.validate()
            .then(()=>{
                getinfo(data)
            })
            .catch(
                Toast.error('请验证表单后重新提交')
            )
    }
    async function getinfo(adda) {
            const res = await getuserinfo(adda)
            let tableData = {...res.data.data}
            const colorArray = ["amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "light-green", "lime", "orange", "pink", "purple", "red", "teal", "violet", "yellow"]
            const colorLength = colorArray.length - 1
            let arr = []
            Object.keys(tableData).forEach((key) => {
                tableData[key].avatarBg = colorArray[parseInt(Math.random() * (colorLength + 1),10)]
                tableData[key].key = tableData[key].studentid
                arr.push(tableData[key])
            })
            childRef.current.ssetdata(arr)
    }
    function change3(v) {
        console.log(v[0])
        api.current.setValue("cname",v[0])
        api.current.setValue("rname",v[1])
        api.current.setValue("majeurname",v[2])
    }
    function displayRender(label) {
        if (Array.isArray(label) && label.length > 0) {
            return label[0];
        }
        return '';
    }
    const GetchildEdit = () => {
        if (childRef.current) {
            api.current.setValues(null)
            childRef.current.fetchData();
        }
    };


    return(
        <>
        <div>查询表格</div>
            <Row>
                <Col span={22} >
                    <Form
                        getFormApi={formApi=>api.current = formApi}
                    wrapperCol={{ span: 20 }}
                    labelCol={{ span: 2 }}
                    labelPosition='left'
                    labelAlign='left'
                >
                    <Row gutter={16}>
                        <Col span={7}><Form.Input
                            rules={[
                                { required: true, message: '' },
                                { type: 'string', message: '请输入中文/英文' },
                                // { validator: (rule, value) => value !=null, message: '姓名不能为空' }
                            ]}
                            field='name' style={{ width: '100%' }} label='姓名' trigger='blur' placeholder='请输入姓名'/></Col>
                        <Col span={7}><Form.Input
                            rules={[
                                { required: true, message: '' },
                                { type: 'number', message: '请输入数字' },
                                // { validator: (rule, value) => value !=null, message: '学号不能为空' }
                            ]}
                            field='studentid' style={{ width: '100%' }} label='学号' trigger='blur' placeholder='请输入学号'/></Col>
                        <Col span={7}><Form.Input
                            rules={[
                                { required: true, message: '' },
                                { type: 'number', message: '请输入手机号' },
                                // { validator: (rule, value) => value !=null, message: '请输入手机号' }
                            ]}
                            field='phone' style={{ width: '100%' }} label='手机号' trigger='blur' placeholder='请输入手机号'/></Col>
                        <Col span={3}><Button  onClick={()=>{validat(api.current.getValues())}} style={{marginBottom:'30px',marginTop:'12px'}} type="secondary" icon={<IconSearch />}>查询</Button></Col>
                    </Row>
                    <Row gutter={16} style={{marginTop:'5px'}}>
                        <Col span={7}> <Form.Cascader
                            placeholder="请选择学院/系部/专业"
                            treeData={treeData}
                            field='cname'
                            label='学院'
                            style={{width:'100%'}}
                            displayRender={displayRender}
                            onChange={(v)=>{change3(v)}}
                            rules={[
                                { required: true, message: '' },
                                { validator: (rule, value) => value !=null, message: '学院不能为空' }
                            ]}
                        >
                        </Form.Cascader></Col>
                        <Col span={7}><Form.Input
                            rules={[
                                { required: true, message: '' },
                                { validator: (rule, value) => value !=null, message: '系部不能为空' }
                            ]}
                            disabled={true} field='rname' style={{ width: '100%' }} label='系' trigger='blur' placeholder='请输入系'/></Col>
                        <Col span={7}><Form.Input
                            rules={[
                                { required: true, message: '' },
                                { validator: (rule, value) => value !=null, message: '专业不能为空' }
                            ]}
                            disabled={true} field='majeurname' style={{ width: '100%' }} label='专业' trigger='blur' placeholder='请输入专业'/></Col>
                        <Col span={3}><Button style={{marginTop:'12px'}} onClick={()=>{GetchildEdit()}} type='primary' icon={<IconRefresh />}>
                            重置
                        </Button></Col>
                    </Row>
                </Form>
                </Col>

                {/*<Col span={2} >*/}
                {/*    <Button onClick={()=>{getinfo(api.current.getValues())}} style={{marginBottom:'30px',marginTop:'11px'}} type="secondary" icon={<IconSearch />}>查询</Button>*/}
                {/*    <Button onClick={()=>{api.current.setValues(null)}} type='primary' icon={<IconRefresh />}>*/}
                {/*        重置*/}
                {/*    </Button>*/}
                {/*</Col>*/}
            </Row>
            <div style={{borderBottom:'0.2px solid #ccc',marginBottom:'15px',marginTop:'15px'}}></div>
            <div style={{marginBottom:'10px'}}>
                <Student_addmodal>添加学生</Student_addmodal>
                <Stuimp></Stuimp>
                <Button icon={<IconDelete />} style={{marginLeft:'15px'}} theme='solid' type='warning'>删除学生</Button>
            </div>
            <StudentTable ref={childRef}></StudentTable>


        </>
    )
}
export default Stutable_form